import { defineComponent, useSlots, reactive } from 'vue'

const Test1 = defineComponent({
  name: 'Test1',
  props: {},
  setup() {
    const user = reactive({
      age: 20,
      name: 'jack',
    })
    const router = useRouter()
    const slots = useSlots()

    return () => (
      <div>
        <van-button type="primary" onClick={router.back}>
          back btn test rotuer
        </van-button>
        <van-cell-group inset={true}>
          <van-field
            v-model={user.name}
            label="文本"
            placeholder="请输入用户名"
          />
        </van-cell-group>
        <div class="header">
          <p>header-slots</p>
          {slots.header && slots.header(user)}
        </div>

        <div class="footer">
          <p>footer-slots</p>
          {slots.footer && slots.footer(user)}
        </div>
      </div>
    )
  },
})
export default Test1
